import Disable from '@/components/Popup/Disable.vue';
<template>
  <div class="bottom">
    <div class="nav">
      <el-button class="goback" @click="goback">
        <i class="el-icon-arrow-left">返回</i>
      </el-button>
      <div class="breadcrumb">
        <span>当前位置：</span>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index/Patrol/Question' }" replace>巡视巡察</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/index/Patrol/Question' }" replace>问题清单</el-breadcrumb-item>
          <el-breadcrumb-item>汇报问题</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <!-- 进度条 -->
    <div class="step_wrap">
      <i class="icon icon-left el-icon-arrow-left" @click="handleLeft"></i>
      <div
        class="scroll"
        v-for="(item, index) in questionList"
        :key="index"
        :style="{'margin-left': num * -460 + 'px','transition': 'all .3s ease-out .1s'}"
      >
        <div class="step_list" :class="{ current: index == current }">
          <div class="step_item">
            <div class="left success" v-if="item.status == '1'">{{ ++index }}</div>
            <div class="left fail" v-else>{{ ++index }}</div>
            <div class="right">
              <div :class="item.status == '1' ? 'status' : 'status1'">
                <span v-if="item.status==1">已完成</span>
                <span v-else-if="item.status==0">未完成</span>
                <span v-else-if="item.status==2">进行中</span>
              </div>
              <div :class="item.status == '1' ? 'title' : 'title1'">{{ item.title }}</div>
              <div class="time">{{ item.startDate }}~{{ item.endDate }}</div>
            </div>
            <div class="line" :class="item.status == '1' ? 'success' : 'fail'"></div>
          </div>
        </div>
      </div>
      <i class="icon icon-right el-icon-arrow-right" @click="handleRight"></i>
    </div>
    <!-- 汇报清单 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">汇报清单</div>
        </div>
        <el-button @click="handleClick(0)">添加</el-button>
      </div>
      <el-table :data="ReportData" border>
        <el-table-column type="index" label="序号" width="53px" align="center"></el-table-column>
        <el-table-column prop="title" label="汇报主题"></el-table-column>
        <el-table-column prop="operatedTime" align="center" label="创建/编辑时间" width="360px"></el-table-column>
        <el-table-column prop="address" label="操作" width="320px" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClick(2, scope.row)">查看</el-button>
            <span class="done">|</span>
            <el-button type="text" @click="handleClick(1, scope.row)">编辑</el-button>
            <span class="done">|</span>
            <el-popconfirm
              title="确定删此该信息吗？"
              hideIcon
              cancelButtonType="button"
              @onConfirm="deletScope(scope.row)"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
            <span class="done">|</span>
            <el-button type="text" @click="downloadScope(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部按钮 -->
    <div class="button_wrap">
      <el-button type="primary" @click="submitReport">提交</el-button>
    </div>
    <!-- 添加、查看、编辑 -->
    <el-dialog :title="type[index]" :visible.sync="dialogFormVisible" width="40%">
      <div v-if="index == 0 || index == 1">
        <el-form :model="form">
          <el-form-item label="汇报主题：" :label-width="formLabelWidth">
            <el-input
              style="width: 60%;"
              v-model="form.theme"
              autocomplete="on"
              placeholder="请输入汇报主题"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="汇报内容：" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="18"
              v-model="form.content"
              placeholder="请输入汇报内容"
              resize="none"
            ></el-input>
          </el-form-item>
          <el-form-item label="情况通报附件上传：" :label-width="formLabelWidth">
            <el-upload
              action
              ref="upload"
              :auto-upload="false"
              :file-list="fileList"
              :on-change="handleChange"
              accept=".docx, .doc, .pdf"
            >
              <el-button size="small" class="upload_button">上传文件</el-button>
              <div slot="tip" class="upload_tip">文件类型：DOC、DOCX、PDF；</div>
            </el-upload>
            <div v-for="(item, index) in fileList" :key="index">
              <div class="file_item">
                <img class="left" :src="pdf" alt />
                <div class="right">
                  <div class="title">{{ item.name }}</div>
                  <div class="done_wrap">
                    <div class="size">{{(item.size / 1024 / 1024).toFixed(1) + "M" }}</div>
                    <div class="innerRight">
                      <div class="button" @click="prev(index)">
                        <img class="image1" :src="preview" alt />
                        <span>预览</span>
                      </div>
                      <span class="done">|</span>
                      <div class="button" @click="download">
                        <img class="image1" :src="download" alt />
                        <span>下载</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="del button" @click="delFile(index)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog_footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveAddQuestion">保存并更新</el-button>
        </div>
      </div>
      <div v-else>
        <div class="form_item">
          <div class="form_left">汇报主题：</div>
          <div class="form_right">{{ form.theme }}</div>
        </div>
        <div class="form_item">
          <div class="form_left">汇报内容：</div>
          <div class="form_right">{{ form.content }}</div>
        </div>
        <div class="form_item">
          <div class="form_left">情况通报附件上传：</div>
          <div class="form_right">
            <div v-for="(item, index) in fileList" :key="index">
              <div class="file_item">
                <img class="left" :src="pdf" alt />
                <div class="right">
                  <div class="title">{{ item.name }}</div>
                  <div class="done_wrap">
                    <div class="size">{{(item.size / 1024 / 1024).toFixed(1) + "M" }}</div>
                    <div class="innerRight">
                      <div class="button" @click="prev(index)">
                        <img class="image1" :src="preview" alt />
                        <span>预览</span>
                      </div>
                      <span class="done">|</span>
                      <div class="button" @click="download">
                        <img class="image1" :src="download" alt />
                        <span>下载</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pdf: require("@/assets/image/pdf.png"),
      preview: require("@/assets/image/preview.png"),
      download: require("@/assets/image/download.png"),
      questionList: [],
      fileList: [],
      baseUrl: null,
      fileUrl: null,
      ReportData: [],
      dialogFormVisible: false,
      formLabelWidth: "140px",
      form: {
        theme: "",
        content: "",
        fileList: [],
      }, //对话框详情
      type: ["添加汇报", "编辑汇报", "查看汇报"], //对话框标题
      index: null, //对话框标题下标
      id: null,
      disabled: false, //查看时不允许编辑
      num: 0,
      length: "",
    };
  },
  computed: {
    current() {
      let flag = true;
      let temp = -1;
      this.questionList.forEach((item, index) => {
        if (item.status == "1") {
          temp = index;
          return false;
        }
      });
      return ++temp;
    },
  },
  created() {
    this.baseUrl = this.$store.state.PortalManagement.fileIp;
    this.get();
  },
  methods: {
    delFile(index) {
      this.fileList.splice(index, 1);
    },
    get() {
      let id = this.$route.query.id;
      this.Api.questtionEcho({ id: id }).then((res) => {
        this.questionList = res.data.processStageList;
        this.length = this.questionList.length;
        this.ReportData = res.data.reportList;
      });
    },
    // 添加问题清单
    saveAddQuestion() {
      if (this.index == 0) {
        let id = this.$route.query.id;
        this.Api.addQuestion({
          id: id,
          title: this.form.theme,
          content: this.form.content,
          attachList: this.fileList,
        }).then((res) => {
          if (res.code == 0) {
            this.fileList = [];
            this.$refs.upload.clearFiles();
            this.get();
            this.dialogFormVisible = false;
            this.$message.success(res.message);
          } else {
            return this.$message.error(res.message);
          }
        });
      } else if (this.index == 1) {
        this.Api.editReport({
          id: this.id,
          title: this.form.theme,
          content: this.form.content,
          attachList: this.fileList,
        }).then((res) => {
          if (res.code == 0) {
            this.fileList = [];
            this.$refs.upload.clearFiles();
            this.get();
            this.dialogFormVisible = false;
            this.$message.success(res.message);
          } else {
            return this.$message.error(res.message);
          }
        });
      }
    },
    //删除
    deletScope(row) {
      this.Api.deleteReport({ id: row.id }).then((res) => {
        if (res.code == 0) {
          this.get();
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },

    handleChange(file, fileList) {
      console.log(file);

      const formData = new FormData();
      formData.append("multipartFile", file.raw);
      this.Api.uploadFile(formData).then((res) => {
        // var data = { ...this.ruleForm, picUrl: res.data.url,pic:res.data.url };
        this.fileList.push({
          name: res.data.fileName,
          size: file.size,
          url: res.data.url,
        });
        // for(let i in res.data){
        //   this.fileList.push(res.data[i])
        // }

        console.log(this.fileList, 111);
        // this.$emit("update:ruleForm", data);
      });
    },
    // 预览
    prev(index) {
      console.log("附件预览", index);
      console.log(this.fileList[index].url);
      // this.dialogVisible = true;
      this.fileUrl = this.fileList[index].url;
      this.baseUrl = this.$store.state.PortalManagement.fileIp;
      this.fileUrl = this.baseUrl + this.fileList[index].url;
      console.log(this.fileUrl);
      var win = window.open();
      win.document.write(
        '<body style="margin:0px;"><object data="' +
          this.fileUrl +
          '" type="application/pdf" width="100%" height="100%"><iframe src="' +
          this.fileUrl +
          '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
      );
    },
    goback() {
      this.$router.go(-1);
    },
    handleClick(index, row) {
      console.log(index, row);
      this.form = {
        theme: "",
        content: "",
        fileList: [],
      };
      this.dialogFormVisible = true;
      this.index = index;
      if (index == 2) {
        this.Api.detailReport({ id: row.id }).then((res) => {
          console.log(res);
          (this.form.theme = res.data.title),
            (this.form.content = res.data.content),
            (this.fileList = res.data.attachList);
        });
      } else if (index == 1) {
        this.id = row.id;
        this.Api.detailReport({ id: row.id }).then((res) => {
          console.log(res);
          (this.form.theme = res.data.title),
            (this.form.content = res.data.content),
            (this.fileList = res.data.attachList);
        });
      }
    },
    // 提交内容
    submitReport() {
      let id = this.$route.query.id;
      this.Api.submitReport({ id: id }).then((res) => {
        if (res.code == 0) {
          this.$router.go(-1);
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleLeft() {
      if (this.length <= 3||this.num==this.length-3) {
        return;
      } else {
        this.num++;
      }
    },
    handleRight() {
      if (this.length <= 3) {
        return;
      } else {
        this.num--;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.del {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: rgba(204, 204, 204, 1);
  border-radius: 50%;
  position: absolute;
  right: 4px;
  top: 5px;
}
.bottom {
  padding-bottom: 40px;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .goback {
    width: 70px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 1);
    padding: 0;
  }
  .breadcrumb {
    display: flex;
    align-items: center;
  }
}
.step_wrap {
  position: relative;

  overflow: hidden;
  margin: 30px 0;
  padding: 0 20px;
  .icon {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 24px;
    color: #666;
  }
  .icon-left {
    left: 0;
  }
  .icon-right {
    right: 0;
  }
  .scroll {
    width: 5000px;
  }
  .step_list {
    
    padding: 0 20px;
    overflow: hidden;
    float: left;
    width: 400px;
    &:nth-last-child(2) {
      .line {
        display: none;
      }
    }
    &:nth-child(1) {
      .proceed {
        background: rgba(22, 119, 255, 1);
      }
    }
    &.current {
      .step_item .left {
        background: rgba(22, 119, 255, 1);
      }
      .step_item .status1 {
        color: #333 !important;
      }
      .step_item .title1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333 !important;
      }
    }
    .step_item {
      display: flex;
      align-items: center;
      overflow: hidden;
      .left {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: 10px;
        line-height: 36px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
      }
      .success {
        background: rgba(22, 119, 255, 1);
      }
      .fail {
        background: #cccccc;
      }
      .right {
        font-size: 14px;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .status {
          color: #333;
          font-size: 16px;
          font-weight: 500;
        }
        .status1 {
          color: #666;
          font-size: 16px;
          font-weight: 500;
        }
        .title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 24px;
          color: #333;
        }
        .title1 {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 24px;
          color: #666;
        }
        .time {
          color: #999999;
        }
      }
      .line {
        width: 120px;
        height: 1px;
        margin-left: 40px;
        margin-right: -10px;
      }
    }
  }
}
.item_wrap {
  background-color: #fff;
  padding: 20px;
  .title_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      width: 4px;
      height: 14px;
      background: #3d7fff;
    }
    .title {
      font-weight: 500;
      margin: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }
  .content_wrap {
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      .name {
        font-style: 14px;
        font-weight: 500;
        color: #333;
        margin-right: 10px;
      }
      .el-select,
      .el-input {
        width: 320px;
        // height: 36px;
      }
    }
  }
  .done {
    margin: 0 10px;
  }
}
.hasbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
  }
  .el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3d7fff;
  }
}
.button_wrap {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 100px;
  right: 0;
  z-index: 99;
  text-align: right;
  padding: 10px 20px;
  .el-button {
    margin-left: 10px;
  }
}
// 对话框
.upload_tip {
  font-size: 12px;
  color: #999;
}
/deep/.el-dialog__header {
  background-color: #e6e9ed;
}
.dialog_footer {
  text-align: right;
}
.upload_button {
  border-radius: 4px;
  border: 1px solid rgba(61, 127, 255, 1);
  color: #3d7fff;
}
.form_item {
  display: flex;
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  .form_left {
    width: 140px;
    font-weight: 500;
    text-align: right;
  }
  .form_right {
    width: 630px;
  }
}
.file_item {
  position: relative;
  background-color: #fff;
  width: 360px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  .left {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .right {
    font-size: 14px;
    line-height: 22px;
    .title {
      width: 250px;
      color: #333;
      margin-bottom: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .done_wrap {
      display: flex;
      align-items: center;
      .size {
        color: #999;
        margin-right: 110px;
      }
      .innerRight {
        text-align: right;
        color: #3d7fff;
        display: flex;
        align-items: center;
      }
    }
  }
  .button {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .del {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
  }
  .done {
    margin: 0 10px;
  }
}
</style>